<template>
  <view class="cu-list" :class="getListContainerClassNames">
    <template v-for="(colMeta, colIdx) in tableColMetaList" :key="colMeta.key">
      <!--  -->
      <view
        class="bg-white"
        style="text-align: left;"
        v-if="isShowTopLabels[colIdx]"
      >
        <view class="action">
          <!-- <text class="cuIcon-title text-orange "></text>  -->
          <text style="margin-left:30rpx;"> {{ colMeta.label }} </text>
        </view>
      </view>
      <!--  -->
      <view
        v-show="colMeta?.isShow ?? true"
        class="cu-item"
        :class="{ arrow: colMeta.type === 'RightArrowIcon' && !!colMeta?.link }"
        @click="clickCurItem(colMeta, colIdx)"
      >
        <view
          v-if="listContainerType === 'ImageText'"
          class="cu-avatar round lg"
          style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"
        ></view>
        <template
          v-if="
            ['ImageText', 'Default', 'Table', 'Form'].includes(
              listContainerType
            )
          "
        >
          <view
            v-if="!isShowTopLabels[colIdx]"
            class="content"
            style="max-width: 200rpx;"
          >
            <text
              v-if="colMeta?.componentAttr?.labelIcon?.site ?? '' === 'Left'"
              :class="[
                `cuIcon-${colMeta?.componentAttr?.labelIcon?.name}`,
                `cuIcon-${colMeta?.componentAttr?.labelIcon?.color}`,
              ]"
            ></text>
            <view :class="getLabelTextClassNames(colMeta)">
              <text style="color:red;">{{
                requiredMetaKeys.includes(colMeta.key) ? "*" : ""
              }}</text>
              {{ colMeta.label }}
            </view>
            <text
              v-if="colMeta?.componentAttr?.labelIcon?.site ?? '' === 'Right'"
              :class="[
                `cuIcon-${colMeta?.componentAttr?.labelIcon?.name}`,
                `cuIcon-${colMeta?.componentAttr?.labelIcon?.color}`,
              ]"
            ></text>
            <view
              v-if="colMeta?.componentAttr?.labelTip ?? false"
              class="text-sm flex"
              :class="[
                `text-${colMeta.componentAttr.labelTip?.color ?? 'gray'}`,
              ]"
            >
              <view class="text-cut">
                <!-- <text class="cuIcon-infofill text-red  margin-right-xs"></text> -->
                {{ colMeta.componentAttr.labelTip?.text ?? "" }}
              </view>
            </view>
          </view>
          <view class="action" :class="getContentClassNames(colMeta, colIdx)">
            <DimensionItemContent
              :class="getContentComponentClassNames(colMeta, colIdx)"
              :component-meta="colMeta"
              :table-row-data="tableRowData"
              :row-idx="rowIdx"
              :validate="validateMethods?.[colMeta.key]"
              :table-col-meta-list="tableColMetaList"
              @updateErrTip="
                (errTip) => formValidate.updateErrTip(colMeta.key, errTip)
              "
            ></DimensionItemContent>
            <!-- <view class="text-grey text-xs">22:20</view>
        <view class="cu-tag round bg-grey sm">5</view> -->
          </view>
        </template>
        <template v-else-if="listContainerType === 'Grid'">
          <view :class="colMeta?.componentAttr?.icon ?? null"></view>
          <text>{{ colMeta.label }}</text>
        </template>
        <template v-else-if="listContainerType === 'inline-form'">
          <DimensionItemContent
            :class="getContentComponentClassNames(colMeta, colIdx)"
            :component-meta="colMeta"
            :table-row-data="tableRowData"
            :row-idx="rowIdx"
            :validate="validateMethods?.[colMeta.key]"
            :table-col-meta-list="tableColMetaList"
            @updateErrTip="
              (errTip) => formValidate.updateErrTip(colMeta.key, errTip)
            "
          ></DimensionItemContent>
        </template>
      </view>
      <view
        v-if="['ImageText', 'Default'].includes(listContainerType)"
        class="err-tip"
        >{{ errTips[colMeta.key] }}</view
      >
    </template>
  </view>
</template>

<script setup>
import { computed, watch, toRefs, getCurrentInstance } from "vue";

import DimensionItemContent from "@gd-accbuild-ui/dimension-ui/dimension-item-content/dimension-item-content.vue";

import useFormValidate from "./hooks/useFormValidate";

//////////////////////////内置页面跳转函数
import { globalConfig } from "@gd-accbuild-core/config";
//////////////////////////

const listContainerTypeToClassName = {
  ImageText: "menu-avatar",
  Grid: "grid",
  Default: "menu",
  Form: "menu",
  Table: "menu",
};
const props = defineProps({
  listContainerType: {
    type: String,
    default: "Default",
    validator(prop) {
      return ["Default", "ImageText", "Grid", "Form", "Table"].includes(prop);
    },
  },
  colNum: {
    type: Number,
    default: 1,
  },
  hasGridBorder: {
    type: Boolean,
    default: true,
  },
  tableColMetaList: {
    type: Array,
    default: () => [],
  },
  tableRowData: {
    type: Object,
    default: () => ({}),
  },
  rowIdx: {
    type: Number,
    default: 0,
  },
  labelCommonAttr: {
    type: Object,
    default: () => ({
        /* textColorFunc:(colMeta)=>{
            return "text-black"
        } */
    }),
  },
});
const { tableColMetaList } = toRefs(props);
const formValidate = useFormValidate(tableColMetaList);

const requiredMetaKeys = computed(() => {
  return formValidate.requiredMetaKeys.value;
});
const validateMethods = computed(() => {
  return formValidate.validateMethods.value;
});
const errTips = computed(() => {
  return formValidate.errTips.value;
});

const clickCurItem = (colMeta, colIdx) => {
  if (colMeta?.link) {
    globalConfig.router.push({
      url: colMeta.link,
    });
  } else {
  }
};
////////////////////////////////////////
//样式相关//
////////////////////////////////////////
const isShowTopLabels = computed(() => {
  return tableColMetaList.value.map((colMeta) => {
    return (
      (colMeta?.isShow ?? true) && colMeta?.componentAttr?.labelStyle === "Top"
    );
  });
});
/**
 * list容器整体的相关样式
 *  */
const getListContainerClassNames = computed(() => {
  //容器的类型风格
  const containerClassName =
    listContainerTypeToClassName[props.listContainerType];
  //当为宫格容器时,宫格列数
  const gridColNumClassName =
    props.listContainerType === "Grid" ? `col-${props.colNum}` : null;
  //当为宫格容器时,宫格的边框
  const gridBorderClassName =
    props.listContainerType === "Grid" && !props.hasGridBorder
      ? "no-border"
      : null;
  return [containerClassName, gridColNumClassName, gridBorderClassName];
});
/**
 * content容器的相关样式
 *  */
const getContentClassNames = (colMeta, colIdx) => {
  //文字颜色
  const textColor = colMeta?.componentAttr?.actionBox?.textColor ?? "text-grey";
  //内容容器的 大小、背景色等
  const contentContainer = isShowTopLabels.value[colIdx]
    ? "list-item__content-container--top-label"
    : null;
  //内容对齐方式
  const contentAlign =
    props.listContainerType === "Form"
      ? "list-item__content-container--align-left"
      : null;
  return [textColor, contentContainer, contentAlign];
};

/**
 * content的组件的相关样式
 *  */
const getContentComponentClassNames = (colMeta, colIdx) => {
  const contentComponentPadding = isShowTopLabels.value[colIdx]
    ? "list-item__content-component--padding"
    : null;
  return [contentComponentPadding];
};

const getLabelTextClassNames = (colMeta) => {
  let textColor =
    typeof colMeta?.type === "string" && colMeta.type.indexOf("Text") !== -1
      ? "text-grey"
      : "text-black";
  //覆盖样式
  if (typeof props.labelCommonAttr?.textColorFunc === "function") {
    textColor = props.labelCommonAttr?.textColorFunc(colMeta);
  }
  return [textColor];
};
</script>

<style lang="scss" scoped>
.err-tip {
  display: block;
  text-align: center;
  color: #dd524d;
  background-color: #fff;
  font-size: 12px;
}
.list-item__content-container--top-label {
  background-color: #eee;
  min-height: 100%;
  line-height: 100%;
}
.list-item__content-container--align-left {
  flex: 1;
  text-align: left;
  padding-left: 20rpx;
}
.list-item__content-component--padding {
  padding: 10rpx;
}
</style>
